<!-- 拆分备料单 -->
<template>
  <el-dialog
    custom-class="splitDialog"
    append-to-body
    :close-on-click-modal="false"
    title="备料单拆分"
    :visible.sync="splitDialog.visible"
    v-if="splitDialog.visible"
    width="80%"
    top="5vh"
    @close="close()"
  >
    <div class="splitTable" v-loading="splitDialog.loading">
      <div class="mainTitle">拆分的子备料单明细</div>
      <div class="subTitle">拆分的子备料单个数（个）：{{ splitCount }}</div>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in splitTotalData" :key="index" :name="index">
          <template slot="title">
            <span>子备料单：{{ item.preparationOrderNo }} </span>
            <span style="margin-left: 10px">仓库：{{ item.warehouseName }} </span>
            <span style="margin-left: 10px">物料个数：{{ item.quantity }} </span>
            <span style="margin-left: 10px"> 负责人：{{ item.supervisorName }} </span>
          </template>
          <avue-crud :option="splitDialog.option" :data="item.detailMaterials" ref="packBoxTableCrud"> </avue-crud>
        </el-collapse-item>
      </el-collapse>
      <!-- </el-tab-pane>
      </el-tabs> -->
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel" size="small" icon="el-icon-circle-close">取 消</el-button>
      <el-button v-preventReClick @click="submit" type="primary" size="small" icon="el-icon-check">提 交</el-button>
      <el-button v-preventReClick @click="submitAndPrint" type="primary" size="small" icon="el-icon-check">提交并打印</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { prepareSplits, prepareSplitsSubmit } from '@/api/warehouse/preMaterialList';

export default {
  name: 'splitDialog',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      splitType: '',
      splitLevel: '',
      splitLevelValue: '',
      sheetNo: '',
      activeNames: [0],
      prepareMaterialSheetVoList: null,
      isFifo: false,
      preparationOrderNo: '',
      splitCount: 0,
      splitTotalData: [],
      splitDialog: {
        visible: false,
        loading: false,
        data: [],
        form: {},
        option: {
          tip: false,
          searchShow: true,
          searchSpan: 4,
          searchMenuSpan: 6,
          dialogClickModal: false,
          // height: '150',
          border: true,
          addBtn: false,
          editBtn: false,
          viewBtn: false,
          cancelBtn: false,
          saveBtn: false,
          selection: false,
          menu: false,
          page: false,
          index: true,
          indexLabel: '序号',
          refreshBtn: false,
          expandBtn: false,
          columnBtn: false,
          column: [
            {
              label: '物料编码',
              prop: 'partNo'
            },
            {
              label: '物料名称',
              prop: 'partName'
            },
            {
              label: '物料型号',
              prop: 'partModel'
            },
            {
              label: '单据数量',
              prop: 'requiredQuantity'
            },
            {
              label: '应发数量',
              prop: 'recommendQuantity'
            },
            {
              label: '推荐批次',
              prop: 'recommendLotNo'
            },
            {
              label: '推荐储位',
              prop: 'recommendStorageCode'
            }
          ]
        }
      }
    };
  },
  watch: {
    visible: {
      handler(value) {
        this.splitDialog.visible = value;
      }
    }
  },
  methods: {
    getData(row) {
      this.splitDialog.loading = true;
      this.splitTotalData = [];
      this.preparationOrderNo = row.preparationOrderNo;
      prepareSplits(row.preparationOrderNo)
        .then((res) => {
          let data = res.data.data;
          this.splitCount = data.splitCount;
          this.splitTotalData = data.splitDetail;
        })
        .catch((err) => {})
        .finally(() => {
          this.splitDialog.loading = false;
        });
    },
    handleOpenRuleDialog() {
      let PARAMS = { isFifo: this.isFifo, splitRule: { splitType: this.splitType, splitLevelValue: this.splitLevelValue, splitLevel: this.splitLevel } };
      this.$emit('openRuleDialog', 'split', PARAMS);
    },
    submit() {
      prepareSplitsSubmit({
        splitCount: this.splitCount,
        preparationOrderNo: this.preparationOrderNo,
        printFlag: false,
        splitDetail: this.splitTotalData
      })
        .then((res) => {
          this.close();
          this.$message.success('拆分备料单成功');
        })
        .catch((err) => {});
    },
    submitAndPrint() {
      prepareSplitsSubmit({
        splitCount: this.splitCount,
        preparationOrderNo: this.preparationOrderNo,
        printFlag: true,
        splitDetail: this.splitTotalData
      })
        .then((res) => {
          this.close();
          this.$message.success('拆分备料单和打印成功');
          window.open(`${this.website.reportUrl}/preview?_u=blade-备料单打印.ureport.xml&sheetNo=${row.preparationOrderNo}`);
        })
        .catch((err) => {});
    },
    cancel() {
      this.close();
    },
    close() {
      this.splitDialog.visible = false;
      this.$emit('closeDialog');
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .splitDialog {
  .el-dialog__body {
    padding: 10px 20px;
  }
  .avue-crud__menu {
    display: none;
  }
  .ruleRowForm {
    margin-bottom: 5px;
    .el-radio {
      margin-right: 10px;
    }
    .header-icon {
      margin-right: 10px;
    }
  }
  .splitTable {
    overflow-y: auto;
    height: 50vh;
    margin-top: 10px;
    .mainTitle {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      margin: 5px 0;
    }
    .subTitle {
      font-size: 16px;
      font-weight: bold;
      margin: 5px 0;
    }
  }
}
</style>
